<template>
  <div>
    <div class="ke__search">
      <k-form inline @submit="onClickSearch">
        <k-form-item>
          <el-button size="small" icon="el-icon-plus" @click="onClickCreate">新增招聘信息</el-button>
        </k-form-item>

        <k-form-item>
          <el-input placeholder="输入职位名称搜索" size="small" v-model="search.key" style="width: 400px"/>
        </k-form-item>

        <k-form-item>
          <el-button type="info" size="small" native-type="submit" icon="el-icon-search">搜索</el-button>
        </k-form-item>
      </k-form>
    </div>


    <div class="ke__bgfff">
      <el-table :data="list" v-loading="loading" size="small">
        <el-table-column prop="id" label="UID" width="80"/>

        <el-table-column label="职位名称">
          <template slot-scope="{ row }">
            {{ row.name }}
            <span style="color: red" v-show="row.urgent_time <= date">
              紧急
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="company.name" label="公司名称"/>

        <el-table-column prop="money" label="薪资">
          <template slot-scope="{ row }">
            {{ row.money_min }}-{{ row.money_max }}K
          </template>
        </el-table-column>

        <el-table-column prop="exp" label="经验"/>

        <el-table-column prop="edu" label="学历要求"/>

        <el-table-column label="状态" align="center" width="80px">
          <template slot-scope="{ row }">
            <span v-if="row.status === 0">停止招聘</span>
            <span v-else-if="row.status === 1">招聘中</span>
          </template>
        </el-table-column>

        <el-table-column prop="create_time" label="发布时间" width="200"/>

        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="{ row, $index }">
            <el-button type="text"
                       icon="el-icon-edit"
                       title="编辑"
                       @click="onClickEdit(row, $index)"/>

            <el-button type="text"
                       icon="el-icon-delete"
                       title="删除"
                       @click="onClickDelete(row, $index)"/>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="page"
                     :total="total"
                     :page-size="limit"
                     @current-change="onPageChange"/>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'Users',
  data () {
    return {
      list: [],
      total: 0,
      loading: true,
      page: 1,
      limit: 20,
      search: {
        key: ''
      },
      editDialog: false,
    }
  },
  computed: {
    date () {
      return moment(new Date()).format('yyyy-MM-dd')
    }
  },
  mounted () {
    this.onLoad()
  },
  methods: {
    onClickSearch () {
      this.page = 1
      this.onLoad()
    },
    onPageChange (page) {
      this.list = []
      this.page = page
      this.onLoad()
    },
    // 加载列表
    onLoad () {
      this.loading = true
      this.$http.get('admin/zhaopin', { page: this.page, limit: this.limit, ...this.search })
        .finally(() => this.loading = false)
        .then(result => {
          this.list = result.list
          this.total = result.total
        })
    },
    // 新增招聘信息
    onClickCreate () {
      this.$ke_router.push({ name: 'ZhaopinEdit', params: { id: 0 } })
    },
    // 编辑招聘信息
    onClickEdit (row, idx) {
      this.$ke_router.push({ name: 'ZhaopinEdit', params: { id: row.id } })
    },
    // 删除
    async onClickDelete (row, idx) {
      await this.$confirm('确定要删除吗?')
      this.list.splice(idx, 1)
      this.$http.delete(`admin/zhaopin/${row.id}`)
        .then((result) => {
          if (result.res_code === 0) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(result.res_msg)
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
